<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<html>

<style type="text/css">
        .ecol1 { vertical-align: top; padding-right : 25px }
        .ecol2 { vertical-align: top; border-left: #ACBECE 1px solid; padding-left : 10px }
        .rich-calendar-tool-btn{
            font-family: Arial, Verdana;
        } 
</style>

<body>
<f:view>
<f:loadBundle basename="messages" var="msg"/>
    <h:form>

        <h:panelGrid id="panel" columns="2" columnClasses="ecol1, ecol2">
            <a4j:outputPanel id="calendar" layout="block">
                    <rich:calendar value="#{calendarBean.selectedDate}"
                        locale="#{calendarBean.locale}"
                        popup="#{calendarBean.popup}"
                        datePattern="#{calendarBean.pattern}"
                        showApplyButton="#{calendarBean.showApplyButton}" style="width:200px"/>
            </a4j:outputPanel>
        
            <h:panelGrid columns="2">
                <h:outputText value="Popup Mode:" />
                <h:selectBooleanCheckbox value="#{calendarBean.popup}">
                    <a4j:support event="onclick"  reRender="calendar"/>                     
                </h:selectBooleanCheckbox>
                <h:outputText value="Apply Button:" />
                <h:selectBooleanCheckbox value="#{calendarBean.showApplyButton}">
                    <a4j:support event="onclick"  reRender="calendar"/>                     
                </h:selectBooleanCheckbox>
                <h:outputText value="Select Locale" />
                <h:selectOneRadio value="en/US" valueChangeListener="#{calendarBean.selectLocale}">
                    <a4j:support event="onclick" reRender="calendar"/>
                    <f:selectItem itemLabel="US" itemValue="en/US"/>
                    <f:selectItem itemLabel="DE" itemValue="de/DE"/>
                    <f:selectItem itemLabel="FR" itemValue="fr/FR"/>
                    <f:selectItem itemLabel="RU" itemValue="ru/RU"/>
                </h:selectOneRadio> 

                <h:outputText value="Select Date Pattern:"/>
                <h:selectOneMenu value="#{calendarBean.pattern}">
                    <a4j:support event="onchange" reRender="calendar"/>
                    <f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yy HH:mm"/>
                    <f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yy hh:mm a"/>
                    <f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y"/>
                    <f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy"/>                                             
                </h:selectOneMenu>
                
            </h:panelGrid>  
    
        </h:panelGrid>
    </h:form>   
</f:view>

</body>
</html>
